<template>
  <div class="card-color card-margin">
    <div class="user-notebook-info" >
      <div class="head-item card-header"><i class="el-icon-s-flag" />&nbsp;分类</div>
      <el-checkbox-group v-model="checkList">
        <solt>
          <el-row>
            <template v-for="item in categories">
              <el-col :span="24" :key="item.id" style="text-align: left;padding:5px 0 5px 10px;font-size: 1.3em;">
                  <el-checkbox  :label="item.id" >{{item.name}}</el-checkbox>
              </el-col>
            </template>
          </el-row>
        </solt>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'category',
  data: function () {
    return {
      categories: [],
      checkList: [],
      page: {
        current: 1,
        size: 999,
        total: 0
      }
    }
  },
  computed: {
    currentMenuId: function () {
      return this.$store.state.chooseMenuId
    }
  },
  watch: {
    currentMenuId: function () {
      this.checkList = []
      this.queryNoteCategoryByNoteBook()
    },
    checkList: function (data) {
      let arr = []
      data.forEach(item => {
        arr.push({ id: item })
      })
      this.$store.state.chooseCategories = arr
    }
  },
  created () {
    this.checkList = []
    if (this.$store.state.chooseMenuId) {
      this.queryNoteCategoryByNoteBook()
    }
  },
  methods: {
    queryNoteCategoryByNoteBook: function () {
      request({
        url: '/notebook/note_category/queryNoteCategoryByNoteBook',
        method: 'post',
        data: {
          id: this.$store.state.chooseMenuId
        }
      }).then(res => {
        if (res.result) {
          this.categories = res.data
          this.$store.state.curCategories = this.categories
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { console.log('done') })
    },
    categoryClick: function (menu) {
      this.$store.state.chooseMenuId = menu.id
      this.$emit('menuClick', menu)
    },
    changeActive ($event) {
      if ($event.currentTarget.className && $event.currentTarget.className.indexOf('choose-menu') > 0) {
        $event.currentTarget.className = 'left-item menu-item card-hover-color choose-menu'
      } else $event.currentTarget.className = 'left-item menu-item card-hover-color'
    },
    removeActive ($event) {
      if ($event.currentTarget.className && $event.currentTarget.className.indexOf('choose-menu') > 0) {
        $event.currentTarget.className = 'left-item menu-item choose-menu'
      } else $event.currentTarget.className = 'left-item menu-item'
    }
  }
}
</script>

<style>
  .menu-item{
    display: flex;
    flex-direction: row;
    text-align: left;
    font-size:13px;
    font-weight: bold;
  }

</style>
